<template>
  	<view class="wrap">
  		<view class="top"></view>
  		<view class="content">
  			<view class="title">欢迎登录</view>
  			<input class="u-border-bottom" type="number" v-model="phone" placeholder="请输入手机号" />
  			<view class="tips">未注册的手机号，登录后自动注册</view>
  			<button @tap="submit" :style="[inputStyle]" class="getCaptcha">
  				登录
  			</button>
  		</view>
  		<view>
  			<u-toast ref="uToast" />
  		</view>
  	</view>
  </template>

  <script>
  	import {LoginApi} from '../api.js'
  	export default {
  		data() {
  			return {
  				phone: "",
  				loading: false,
  			};
  		},
  		onShow: function() {
  			this.phone = uni.getStorageSync("phone");
  		},
  		computed: {
  			inputStyle() {
  				let style = {};
  				if (this.phone) {
  					style.color = "#fff";
  					style.backgroundColor = this.$u.color["warning"];
  				}
  				return style;
  			},
  		},
  		methods: {
  			submit() {
  				if (this.loading) return;
  				if (this.$u.test.mobile(this.phone)) {
  					this.loading = true;
  					uni.setStorageSync("phone", this.phone);
  					LoginApi({phone: this.phone})
  						.then(res => {
  							this.$refs.uToast.show({
  								title: "登录成功",
  								position: "top",
  							});
							uni.reLaunch({
								url: '/pages/index'
							})
  						})
  				} else {
  					this.$refs.uToast.show({
  						title: "请输入正确的手机号",
  						position: "top",
  					});
  				}
  			},
  		},
  	};
  </script>

  <style lang="scss" scoped>
  	.wrap {
  		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

  		.content {
			padding-top: 20vh;
  			width: 600rpx;
  			margin: 80rpx auto 0;

  			.title {
  				text-align: left;
  				font-size: 60rpx;
  				font-weight: 500;
  				margin-bottom: 100rpx;
  			}

  			input {
  				text-align: left;
  				margin-bottom: 10rpx;
  				padding-bottom: 6rpx;
  			}

  			.tips {
  				color: $u-type-info;
  				margin-bottom: 60rpx;
  				margin-top: 8rpx;
  			}

  			.getCaptcha {
  				background-color: rgb(253, 243, 208);
  				color: $u-tips-color;
  				border: none;
  				font-size: 30rpx;
  				padding: 12rpx 0;

  				&::after {
  					border: none;
  				}
  			}
  		}
  	}
  </style>
